<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html lang="zh-cn" style="height: 100%">
<base href="<%=basePath%>">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>手机群录</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/service.css">
    <link rel="stylesheet" href="css/styleMobile.css">
    <style type="text/css">
        /*.sort_list{*/
        /*white-space: nowrap;*/
        /*}*/
        .num_name span {
            width: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .num_name {
            width: 30%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .number {
            min-width: 130px;
        }

    </style>
</head>
<body>

<header class="fixed">
    <div class="header">
     <span class="" onclick="changeCard()">
         通讯录
     </span>
    </div>
</header>

<div id="letter"></div>
<div class="sort_box">

</div>
<div class="initials">
    <ul>
        <li><img src="img/068.png"></li>
    </ul>
</div>
<div class="toast toast_timeout" style="display:none">网络异常，请稍后重试！</div>
<div class="toast toast_error" style="display:none"></div>
<div class="loading" style="display:none">
    <img src="img/loading.gif"></div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/handle.js"></script>
<script type="text/javascript" src="js/jquery.charfirst.pinyin.js"></script>
<script type="text/javascript" src="js/sort.js"></script>
<script type="text/javascript">
    var fromPage = "${fromPage}"
    var orgId = "${oid}";
    getMobileList();
    function getMobileList() {
        var data = {
            oid: "${oid}"
        }
        $(".loading").show();
        $.ajax({
            url: $.httpRootPath() + 'rest/group/mobile',
            type: 'GET',
            dataType: 'json',
            data: data,
            cache: false,
            timeout: 15000,
            success: function (r) {
                var list = []; // 卡片信息数组
                for (var i = 0; i < r.data.length; i++) {
                    var obj = r.data[i];
                    obj.mobiles =  obj.mobiles.split("/");
                    var name = obj.name;
                    var memberNum = obj.memberNum;
                    var mobile = obj.mobiles[0] // 到期时间
                    var pic = "<img src='img/mobile_self.png' alt=''>";
                    var memAuth = obj.memAuth;
                    list.push([name, orgId, memberNum, mobile, pic, memAuth]);
                }
                loadCard(list); // 绘制卡列表的dom
                addSort();
            },
            error: function (e) {
                $(".loading").hide();
                errorToast(r.msg, 3);
            }
        });
    }

    // 点击选中卡后返回原来页面
    function goDetail(ele) {
        var num = $(ele).parent().attr("data-memberNum")
        window.location.href = "wxmp/user/hisInfo?oid=" + orgId + "&memberNum=" + num;
    }

    // 根据卡列表的长度加载页面
    function loadCard(list) {
        console.log(list);
        if (!list) {
            return;
        }
        var clr;
        if (list.length == 0) {
            $(".nocard").removeClass('none');
            $(".wrap").addClass('none');
        } else {
            for (var i = 0; i < list.length; i++) {
                var logoDiv = "<div class='num_logo' onclick='goDetail(this)'>"
                var aHref = "<a href='tel:" + list[i][3] + "'>"
                if (list[i][5] == "1") {
                    logoDiv = "<div class='num_logo' onclick=''>"
                    aHref = "<a>"
                }
                if (list[i][3] == "信息缺少") {
                    aHref = "<a>"
                }
                var name = list[i][0];
                var mobile = list[i][3];
                var innerText = "<div class='sort_list"
                    + "' data-memberNum='"
                    + list[i][2]
                    + "' onclick=''>"
                    + logoDiv
                    + list[i][4]
                    + "</div>"
                    + "<div class='num_name'><span>"
                    + name
                    + "</div></span>"
                    + aHref
                    + "<div class='number'><image src='img/mobile.png' class ='plogo'>"
                    + mobile
                    + "</div>"
                    + "</a>"
                    + "</div>"
                $(".sort_box").append(innerText);
            }
            $(".wrap").removeClass('none');
        }
        $(".loading").hide();
    }

    function changeCard() {
        if (fromPage == "inGroup") {
            window.location.href = "wxmp/group/group"
        } else if (fromPage == "yellowPage") {
            window.location.href = "wxmp/yellow/group";
        } else {

        }
    }
</script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="js/weixin.js"></script>
<script type="text/javascript">
    getSignature([],function () {
        wx.hideAllNonBaseMenuItem();
    });
</script>
</body>
</html>